<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
		*{margin: 0;padding: 0;}
		html,body{display: flex;width: 100%;height: 100%;}
		body{
			background: rgba(56,106,178,0.8);
			perspective: 800px;
		}
		.box{width: 650px;
			height: 500px;
			border:1px solid white;
			box-shadow: 0 0 15px white;
			margin:auto;
			padding-top: 15px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			transform:rotateX(60deg) rotateZ(60deg);
			transform-style: preserve-3d;
		}
		.box div{
			width: 200px;
			height: 150px;

			background: rgba(255,0,0,0.7);
			display: flex;
			transition: 1s;
		}
		.box div:hover{
			background: yellow;
			transform: translateZ(20px);
			box-shadow:10px 20px 5px rgba(39,40,34);
		}
	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>